@charset "UTF-8";
//-----------------------------------------------------	
// rotate scss
//-----------------------------------------------------


// rotateIn
@mixin animate-rotateIn () {
  @include keyframes(rotateIn){
    0% {
      opacity: 0;
      @include rotate(-200deg);
    }
    100% {
      opacity: 1;
      @include rotate(0);
    }
  }
  .rotateIn {
    @include animation-name(rotateIn);
    @extend %animated;
  }
}

// rotateInDownLeft
@mixin animate-rotateInDownLeft () {
  @include keyframes(rotateInDownLeft){
    0% {
      opacity: 0;
      @include rotate(-90deg);
    }
    100% {
      opacity: 1;
      @include rotate(0);
    }
  }
  .rotateInDownLeft {
    @include transform-origin(left bottom);
    @include animation-name(rotateInDownLeft);
    @extend %animated;
  }
}

// rotateInDownRight
@mixin animate-rotateInDownRight () {
  @include keyframes(rotateInDownRight){
    0% {
      opacity: 0;
      @include rotate(90deg);
    }
    100% {
      opacity: 1;
      @include rotate(0);
    }
  }
  .rotateInDownRight {
    @include transform-origin(right bottom);
    @include animation-name(rotateInDownRight);
    @extend %animated;
  }
}

// rotateInUpLeft
@mixin animate-rotateInUpLeft () {
  @include keyframes(rotateInUpLeft){
    0% {
      opacity: 0;
      @include rotate(90deg);
    }
    100% {
      opacity: 1;
      @include rotate(0);
    }
  }
  .rotateInUpLeft {
    @include transform-origin(left bottom);
    @include animation-name(rotateInUpLeft);
    @extend %animated;
  }
}

// rotateInUpRight
@mixin animate-rotateInUpRight () {
  @include keyframes(rotateInUpRight){
    0% {
      opacity: 0;
      @include rotate(-90deg);
    }
    100% {
      opacity: 1;
      @include rotate(0);
    }
  }
  .rotateInUpRight {
    @include transform-origin(right bottom);
    @include animation-name(rotateInUpRight);
    @extend %animated;
  }
}

// rotateOut
@mixin animate-rotateOut () {
  @include keyframes(rotateOut){
    0% {
      opacity: 1;
      @include rotate(0);
    }
    100% {
      opacity: 0;
      @include rotate(200deg);
    }
  }
  .rotateOut {
    @include animation-name(rotateOut);
    @extend %animated;
  }
}

// rotateOutDownLeft
@mixin animate-rotateOutDownLeft () {
  @include keyframes(rotateOutDownLeft){
    0% {
      opacity: 1;
      @include rotate(0);
    }
    100% {
      opacity: 0;
      @include rotate(90deg);
    }
  }
  .rotateOutDownLeft {
    @include transform-origin(left bottom);
    @include animation-name(rotateOutDownLeft);
    @extend %animated;
  }
}

// rotateOutDownRight
@mixin animate-rotateOutDownRight () {
  @include keyframes(rotateOutDownRight){
    0% {
      opacity: 1;
      @include rotate(0);
    }
    100% {
      opacity: 0;
      @include rotate(-90deg);
    }
  }
  .rotateOutDownRight {
    @include transform-origin(right bottom);
    @include animation-name(rotateOutDownRight);
    @extend %animated;
  }
}

// rotateOutUpLeft
@mixin animate-rotateOutUpLeft () {
  @include keyframes(rotateOutUpLeft){
    0% {
      opacity: 1;
      @include rotate(0);
    }
    100% {
      opacity: 0;
      @include rotate(-90deg);
    }
  }
  .rotateOutUpLeft {
    @include transform-origin(left bottom);
    @include animation-name(rotateOutUpLeft);
    @extend %animated;
  }
}

// rotateOutUpRight
@mixin animate-rotateOutUpRight () {
  @include keyframes(rotateOutUpRight){
    0% {
      opacity: 1;
      @include rotate(0);
    }
    100% {
      opacity: 0;
      @include rotate(90deg);
    }
  }
  .rotateOutUpRight {
    @include transform-origin(right bottom);
    @include animation-name(rotateOutUpRight);
    @extend %animated;
  }
}